<template>
    <div id="turntable">
        <div>
            <el-card>
                <el-form ref="form" :model="form" label-width="80px" :inline="true" size="small">
                    <el-form-item>
                        <el-button type="primary" size="small" @click="addRecharge">添加设置</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="title"
                            label="标题">
                    </el-table-column>
                    <el-table-column
                            prop="coin"
                            :label="this.$store.state.name">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="warning" plain size="small" @click="edit(scope.row)">
                                修改
                            </el-button>
                            <el-button type="danger" plain size="small" @click="remove(scope.row.keyId)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-card>
            <!--            新增或编辑-->
            <el-dialog :title="fromTitle" width="50%" :visible.sync="visible">
                <el-row :gutter="20">
                    <el-col :span="15">
                        <el-form ref="form" label-width="150px" size="small">
                            <el-form-item label="标题">
                                <el-input v-model="form.title"></el-input>
                            </el-form-item>
                            <el-form-item :label="this.$store.state.name">
                                <el-input v-model="form.coin"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogClose" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "turntable",
        data() {
            return {
                form: {
                    title: '',
                    coin: '',
                },
                tableData: [],
                visible: false,
                fromTitle: '',
                keyId: '',
            }
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                this.$axios.post('AdminApi/Config/ajaxGetValue', {key: 'lucky_wheel'}).then((res) => {
                    console.log(res);
                    let obj = res.data;
                    let arr = [];
                    for (let key  in obj) {
                        Object.assign(obj[key], {keyId: key});
                        arr.push(obj[key])
                    }
                    this.tableData = arr;
                });
            },
            viewClick(score) {
                console.log(score)
            },

            dialogClose() {
                this.visible = false
            },
            addRecharge() {
                this.form = {
                    title: '',
                    coin: '',
                };
                this.keyId = '';
                this.fromTitle = '新增';
                this.visible = true
            },
            edit(row) {
                this.fromTitle = '修改';
                this.visible = true;
                this.keyId = row.keyId;
                this.form = row;
            },
            dialogAffirm() {
                if (this.keyId) {
                    // 编辑
                    this.form = Object.assign(this.form, {key_id: this.keyId, key: 'lucky_wheel'});
                    this.$axios.post('AdminApi/Config/ajaxSetValue', this.form).then((res) => {
                        this.$message.success('成功');
                        this.getData();
                        this.visible = false
                    });
                } else {
                    // 添加
                    this.form = Object.assign(this.form, {key: 'lucky_wheel'});
                    this.$axios.post('AdminApi/Config/addValue', this.form).then((res) => {
                        this.$message.success('成功');
                        this.getData();
                        this.visible = false
                    });
                }
            },
            remove(id) {
                this.$confirm('确定要进行操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('AdminApi/Config/delKey', {key_id: id, key: 'lucky_wheel'}).then((res) => {
                        this.$message.success('删除成功!');
                        this.getData();
                    });
                }).catch(() => {

                });
            }
        }
    }
</script>

<style scoped>

</style>